<template>
    <div>

        <h1>课程详情</h1>

        <br />

        标题：{{data.course_name}}

        <br />
        
        价格：{{data.price}}

        <br />

        课程视频：<video id="video" width="300" height="230" :src="src" controls="controls" autoplay="autoplay" muted>

        </video>

        <br />
        
        课程分类：{{data.cid | myfilter}}
        

        <br><br><br>

        <van-button @click="into">{{msg}}画中画</van-button>

        <br><br><br>

        关注课程：<van-switch v-model="checked" size="200px" @click="follow"/>

        <br><br><br>

        课程打分：<van-rate v-model="value" icon="like"  void-icon="like-o" @change="onChange" />
        {{score}}
        
    </div>
</template>

<script>
import mycate from './mycate'
export default {
    data() {
        return {
            data:{},
            id:'',
            src:'',
            msg:'进入',
            cate:{1:'计算机课程',2:'计算机语言',3:'计算机算法'},
            checked:'',
            uid:localStorage.getItem('uid'),
            value:0,
            score:0
        }
    },
    // 自定义过滤器
    filters:{
        
        myfilter:function(value){

            var cate = {1:'计算机课程',2:'计算机语言',3:'计算机算法'}

            return cate[value];

        }

    },

    components:{
        mycate
    },

    mounted:function(){

        this.id = this.$route.query.cid

        this.get_data()

        this.get_cate()

        this.get_flow()

        this.show_score()

        this.score_avg()

        // 递归向上查找
        const data = [{id:1,name:'计算机课程',children:[{id:2,name:'计算机语言',children:[{id:3,name:'计算机算法'}]}]}]

        let nodes = []

        function getParentNodes(id,tree){
            _getParentNodes([],id,tree)
            return nodes
        }

        function _getParentNodes(his,targetId,tree){

            tree.some((list) =>{

                const children = list.children || []

                if (list.id === targetId){

                    nodes = his
                    return true

                }else if(children.length > 0){

                    const history = [...his]
                    history.push(list)

                    return _getParentNodes[history,targetId,children]

                }

            })

        }

    },

    methods:{
        // 获取关注状态
        get_flow(){

            this.axios.get('http://localhost:8000/getflow/',{params:{'id':this.id,'uid':this.uid}}).then(res=>{
                console.log(res.data)

                let bool = {'true':true,'false':false}

                this.checked = bool[res.data.state]
            })
        },

        get_data(){
            this.axios.get('http://localhost:8000/coursedetail/',{params:{'id':this.id
            }}).then(res=>{
                console.log(res.data)

                this.data = res.data

                this.src = "http://localhost:8000/static/upload/" + this.data.video

            })
        },

        into(){

            if (video !== document.pictureInPictureElement){
                
                video.requestPictureInPicture();

                this.msg = '退出'

            }else{

                document.exitPictureInPicture();

                this.msg = '进入'

            }
            
        },

        get_cate:function(){

            this.axios.get('http://localhost:8000/get_cate/').then(res=>{

                console.log(res);

                var mytree = {'id':0, name:""}

                mytree['children'] = res.data

                this.cate = mytree
                console.log(mytree)

            })

        },

        follow:function(){

            this.axios.post('http://localhost:8000/getflow/',this.qs.stringify({'checked':this.checked,
            'id':this.id,'uid':this.uid})).then(res=>{
                console.log(res)
                if (res.data.code == 200){
                    this.$toast(res.data.message)
                }else{
                    this.$toast(res.data.message)
                }
            })
        },

        //打分动作
        onChange:function(value){

            this.axios.post('http://localhost:8000/score/',this.qs.stringify({'value':this.value,'uid':this.uid,'cid':this.id})).then(res=>{
                console.log(res.data)

            })

        },

        // 获取当前分数
        show_score:function(){
            this.axios.get('http://localhost:8000/score/',{params:{'uid':this.uid,'cid':this.id}}).then(res=>{
                console.log(res.data)

                this.value = res.data.score
            })

        },

        // 展示课程平均分
        score_avg:function(){
            this.axios.get('http://localhost:8000/scoreavg/',{params:{'cid':this.id}}).then(res=>{
                console.log(res.data[0])

                this.score = res.data[0]["avg(score)"]
            })
        }

    }
}
</script>

<style>


</style>